<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <script>
        //绑定事件
        window.onload = function () {
            let oBtn1 = document.getElementById('btn1');
            let oBtn2 = document.getElementById('btn2');

            //绑定事件有三种办法
            //1.写在标签内
            //2.获取对象,并给对象添加一个时间
            // oBtn1.onclick = function () {
            //     alert('1');
            // };

            //3.使用addEventListener(以前ie还有attachEvent,略过)
            oBtn1.addEventListener(
                'click',    //注意这里是click,而不是onclick
                alertA,
                false);

            oBtn1.addEventListener(
                'click',
                alertB,
                false);

            //方案3使得一个对象的同一个事件可以绑定多个函数
            //顺便测试下来优先级: 2>1>3  ,且2会覆盖1

            //补充(据说+推测)
            //ie对事件的处理方式是冒泡
            //所谓冒泡是先子标签再父标签
            //另一种捕获则是先根标签再处理下一级的子标签
            //所以可能导致ie的attachEvent处理顺序是反的(后写入的方法先执行)


            //有事件绑定,自然有绑定解除 removeEventListener (ie下使用)
            oBtn2.onclick = function () {
                oBtn1.removeEventListener(
                    'click',
                    alertB,
                    false
                );

                oBtn1.removeEventListener(
                    'click',
                    alertA,
                    false
                );

                //具体用法没说
                //看来可以绑多个,但是不知道怎么取消绑定行间的
                //取消的是目标函数,匿名可能需要先获取对象然后获取其下的函数
            };



        };


        function alertA() {
            alert('a');
        }

        function alertB() {
            alert('b');
        }

        function alertC() {
            alert('c');
        }






    </script>
</head>

<body>

<div>
    <input type = "button" value="add" id="btn1" onclick="alertC()">
    <input type = "button" value="remove" id="btn2" onclick="alertC()">

</div>

</body>
</html>